<template>
    <div class="projectOverviewContent">
        <img src="@/assets/bigScreen/icons/left/moduls_bg.png" alt="">
        <div class="titles_moduls">
            <img src="@/assets/bigScreen/icons/left/xmgl_icon.png" alt="">
            项目概览
        </div>

        <div class="bottom_box_cons">
            <img src="@/assets/bigScreen/icons/left/xmgl.png" alt="">
            <div class="infs_box_l infs_box_l_1">
                <div class="top_infs_title">
                    项目名称
                </div>
                <div class="top_infs_con">
                    {{ data.projectName }}
                </div>
            </div>
            <div class="infs_box_l infs_box_l_2">
                <div class="top_infs_title">
                    承包单位
                </div>
                <div class="top_infs_con">
                    {{ data.contractor }}
                </div>
            </div>
            <div class="infs_box_l infs_box_l_3">
                <div class="top_infs_title">
                    开工时间
                </div>
                <div class="top_infs_con">
                    {{ data.startDate }}
                </div>
            </div>


            <div class="infs_box_r infs_box_r_1">
                <div class="top_infs_title">
                    竣工日期
                </div>
                <div class="top_infs_con">
                    {{ data.endDate }}
                </div>
            </div>
            <div class="infs_box_r infs_box_r_2">
                <div class="top_infs_title">
                    项目经理
                </div>
                <div class="top_infs_con">
                    {{ data.manager }}
                </div>
            </div>
            <div class="infs_box_r infs_box_r_3">
                <div class="top_infs_title">
                    联系电话
                </div>
                <div class="top_infs_con">
                    {{ data.contact }}
                </div>
            </div>

            <div class="center_num">
                <div>项目已完成</div>
                <count-to :startVal="0" :endVal="+data.progress" :duration="4000" suffix="%"></count-to>
            </div>
        </div>
    </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { getProjectOverview } from "@/api/bigScreen/home.js";
export default {
    components: {
        CountTo
    },
    data() {
        return {
            data: {
                contact: "158649726541",
                contractor: "中煤五建三处",
                endDate: "测试一井副立井施工工程",
                manager: "测试人员",
                progress: 38.52,
                projectName: "新矿一井副立井施工工程",
                startDate: "2024-10-25",
            }
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            getProjectOverview().then(res => {
                if (res.code == 200) {
                    console.log(res.data);

                    this.data = res.data
                }
            })
        }
    },
};
</script>

<style scoped lang="scss">
@font-face {
    font-family: 'kk';
    src: url('../../../../../assets/font/kuaikanshijieti-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'al';
    src: url('../../../../../assets/font/Alibaba-PuHuiTi-Bold_0.ttf');
    font-weight: normal;
    font-style: normal;
}

.projectOverviewContent {
    width: 100%;
    position: relative;

    img {
        width: 100%;
    }

    .titles_moduls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        top: 3%;
        left: 1.5%;

        img {
            width: 1.2vw;
            margin-right: 0.5208vw;
        }


        font-size: 0.8333vw;
        font-weight: 400;
        letter-spacing: 0.0208vw;
        font-family: kk;
        color: transparent;
        background-image: linear-gradient(180deg, rgba(153, 253, 255, 1) 0%, rgba(13, 110, 255, 1) 100%);
        -webkit-background-clip: text;
        background-clip: text;

    }

    .bottom_box_cons {
        width: 100%;
        height: 13.5417vw;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 90%;
        }

        .infs_box_l,
        .infs_box_r {
            width: 28%;
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            // justify-content: flex-start;


            .top_infs_title,
            .top_infs_con {
                width: 100%;
                font-size: 0.6vw;
                color: rgba(255, 255, 255, 1);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .top_infs_title {
                font-weight: 500;
                padding-left: 0.5208vw;
                margin-bottom: 0.5208vw;

            }

            .top_infs_con {
                // width: 100%;
                font-weight: 400;
                font-family: kk;

            }
        }



        .infs_box_l_1 {
            left: 7%;
            top: 13.5%;
        }

        .infs_box_l_2 {
            left: 7%;
            top: 41.5%;
        }

        .infs_box_l_3 {
            left: 7%;
            top: 70.5%;
        }


        .infs_box_r {
            align-items: flex-end;

            .top_infs_title {
                text-align: right;

                padding-right: 0.5208vw;
            }

            .top_infs_con {
                text-align: right;

            }
        }

        .infs_box_r_1 {
            top: 13.5%;
            right: 7%;
        }

        .infs_box_r_2 {
            top: 41.5%;
            right: 7%;
        }

        .infs_box_r_3 {
            top: 70.5%;
            right: 7%;
        }

        .center_num {
            position: absolute;
            bottom: 41%;
            left: 50%;
            transform: translateX(-50%);

            div {
                font-size: .625vw;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                margin-bottom: 3px;
                font-weight: 700;
            }

            span {
                font-family: kk;
                font-size: 1.875vw;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                text-align: right;
                vertical-align: top;
                text-shadow: 0 0 2px #111;
            }
        }
    }
}
</style>